<div class="container">
    <!-- Top & Bottom -->
    <div class="m-b-30">
        <div class="block-header">
            <h2>Top & Bottom</h2>
        </div>

        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-1">
                    .z-depth-1 / .z-depth(1)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-2">
                    .z-depth-2 / .z-depth(2)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-3">
                    .z-depth-3 / .z-depth(3)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-4">
                    .z-depth-4 / .z-depth(4)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-5">
                    .z-depth-5 / .z-depth(5)
                </div>
            </div>
        </div>
    </div>

    <!-- Top Only -->
    <div class="m-b-30">
        <div class="block-header">
            <h2>Top Only</h2>
        </div>

        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-1-top">
                    .z-depth-1-top / .z-depth(1)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-2-top">
                    .z-depth-2-top / .z-depth-top(2)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-3-top">
                    .z-depth-3-top / .z-depth-top(3)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-4-top">
                    .z-depth-4-top / .z-depth-top(4)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-5-top">
                    .z-depth-5-top / .z-depth-top(5)
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Only -->
    <div class="m-b-30">
        <div class="block-header">
            <h2>Bottom Only</h2>
        </div>

        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-1-bottom">
                    .z-depth-1-bottom / .z-depth(1)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-2-bottom">
                    .z-depth-2-bottom / .z-depth-bottom(2)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-3-bottom">
                    .z-depth-3-bottom / .z-depth-bottom(3)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-4-bottom">
                    .z-depth-4-bottom / .z-depth-bottom(4)
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="bs-item z-depth-5-bottom">
                    .z-depth-5-bottom / .z-depth-bottom(5)
                </div>
            </div>
        </div>
    </div>

</div>
